<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<!--[if lt IE 9] <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif] -->

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
      xmlns:pe="http://primefaces.org/ui/extensions"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>INICIO-SVH</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
        <h:outputStylesheet name="css/font.css" />
        <h:outputStylesheet name="css/bootstrap.css" />
        <h:outputStylesheet name="css/style_home.css" /> 
    </h:head>
    <h:body>
        <header>
            <div class="content-image-header">
                <p style="color: #fff;margin-left: -10px;font-size: 35px;">
                    SVH
                </p>
            </div>
            <a id="closed_nav"  href="javascript:;" data-target="#mynav"  data-toggle="collapse">
                <image title="Cerrar Navegación" style="margin-top: 8px;" src="#{request.contextPath}/resources/images/close_nav.png" >
                </image>
            </a>
            <h:form style="">
                <ul class="nav navbar-right top-nav" style="margin-right: 15px;margin-top: -40px;">
                    <li class="dropdown">
                        <a href="#" style="color: #fff;padding:10px 15px 7px 15px;" class="dropdown-toggle" data-toggle="dropdown"><image src="#{request.contextPath}/resources/images/icon_user.png" style="max-width: none;" /> #{sesionControlador.usuario.nick}<b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li>
                                <a href="#" ><i class="fa fa-fw fa-user"></i> Mi Perfil</a>
                            </li>
                            <li class="divider"></li>
                            <li>

                                <h:commandLink action="#{loginControlador.logout}" ><i class="fa fa-fw fa-power-off"></i>Cerrar Sesión</h:commandLink>


                            </li>
                        </ul>

                    </li>
                </ul>
            </h:form>
        </header>
        <div id="content" >
            <nav id="mynav" class="collapse in width">
                <div class="row">
                    <div class="column col-sm-12 col-xs-12 sidebar-offcanvas" id="sidebar-left">
                        <ul class="nav hidden-xs"  id="lg-menu">
                            <c:forEach items="#{sesionControlador.modulos}" var="child" >
                                <li>
                                    <h:link style="color: #fff;" value="#{child.modulo.nombre}" rendered="#{child.listar eq true}" outcome="#{child.modulo.url}"  />
                                </li>
                            </c:forEach>
                            <!--  <li>
                                  <a style="color:#fff"  href="javascript:;" data-toggle="collapse" data-target="#demo"><i class="glyphicon glyphicon-refresh"></i> Dropdown <span class="label">3</span></a>
                                  <ul id="demo" class="collapse">
                                      <li>
                                          <a  href="#"><i class="glyphicon glyphicon-refresh"></i>Dropdown Item</a>
                                      </li>
                                      <li>
                                          <a href="#"><i class="glyphicon glyphicon-refresh"></i>Dropdown Item</a>
                                      </li>
                                  </ul>
                              </li>
                              <li >
                                  <a style="color:#fff"  href="#pepe" data-parent="#accordion"  class="collapse" data-toggle="collapse">Dropdown <b class="caret"></b></a>
                                  <ul id="pepe" class="collapse">
                                      <li><a href="#">Action</a></li>
                                      <li><a href="#">Another action</a></li>
                                      <li><a href="#">Something else here</a></li>
                                      <li class="divider"></li>
                                      <li class="dropdown-header">Nav header</li>
                                      <li><a href="#">Separated link</a></li>
                                      <li><a href="#">One more separated link</a></li>
                                  </ul>
                              </li> -->
                        </ul>
                    </div>
                </div>
            </nav>

            <section>
                <div id="contenido_web">
                    <pe:ajaxErrorHandler title="Error" button="Recargar" />  
                    <ui:insert name="content" >

                    </ui:insert>
                </div>

            </section>
        </div>
        <h:form>
            <p:idleMonitor onactive="PF('sessionTimeOutDialog').show();" timeout="#{session.maxInactiveInterval * 1000}" >
            </p:idleMonitor>
            <p:dialog header="Sesión caducada" widgetVar="sessionTimeOutDialog"
                      modal="true" position="center" closable="false" width="400" visible="false" >
                <h:outputText value="La Sesión ha terminado" />
                <br />
                <input id="confirmBackToLogin" type="button" value="Volver acceder a la aplicación" 
                       onclick="window.location = '#{facesContext.externalContext.requestContextPath}/faces/index.xhtml';" />
            </p:dialog>
        </h:form>
        <h:outputScript library="primefaces" name="jquery/jquery.js" />
        <h:outputScript name="js/bootstrap.js" />
        <h:outputScript name="js/calendar.js" />
        <h:outputStylesheet name="css/primefaces.css" />


    </h:body>
</html>

